<!DOCTYPE html>
<!--
  HTML bootstrap.
  Author: ccalo@google.com (Chris Calo)
  -->
<html lang="en" ng-app="appname">
  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
    <link href='https://fonts.googleapis.com/css?family=RobotoDraft:400,500,700,400italic|Montserrat:400,700' rel='stylesheet' type='text/css'>
    <title>Pendar Yousefi</title>
    <meta name="description" content="Description of your document." />
    <meta name="author" content="chris.calo@gmail.com (Chris Calo)" />
    <link rel="stylesheet" href="/css/style.css"/>
    <script src="/lib/jquery/jquery-2.0.3.js"></script>
    <script src="/lib/angular/angular-1.0.8.min.js"></script>
    <script src="/lib/js-yaml/js-yaml.js"></script>
    <script src="/lib/markdown/markdown.js"></script>
    <script src="/app/main.js"></script>
  </head>
  <body>
    <header id="header">
      <nav>
        <a class="logo" href="/">
          Pendar Yousefi
        </a>
        <ul class="main">
          <li><a href="#projects">Projects<span></span></a></li>
          <li><a href="#experience">Experience<span></span></a></li>
          <li><a href="#education">Education<span></span></a></li>
        </ul>
        <ul class="social">
          <li><a class="twitter" href="http://www.twitter.com/legofish" target="_blank"><span class="symbol">&#xe086;</span></a></li>
          <li><a class="dribbble" href="http://www.dribbble.com/legofish" target="_blank"><span class="symbol">&#xe021;</span></a></li>
          <li><a class="linkedin" href="https://www.linkedin.com/pub/pendar-yousefi/b/315/46a" target="_blank"><span class="symbol">&#xe052;</span></a></li>
        </ul>
      </nav>
    </header>
    <section id="content">
      <section id="hero">
        <article class="intro">
          <figure><img src="/img/me.jpg"></figure>
          <aside>
            <h2> Hi! I am an interaction designer on the AdWords  UX team. Here’s what I’ve been up to. <h2>
          </aside>
        </article>
        <div id="achievements" style="display:none">
          <div class="history">
            <span class="months"></span>
            <strong> months at Google </strong>
          </div>
          <div class="gthanks">
          </div>
          <div class="spotbonus">
          </div>
          <div class="projects">
          </div>
        </div>
      </section>
    </section>
    <section id="projects">
      <a href="/dtt/" class="dtt">
        <h6> Q4 2013 - Present </h6>
        <h2> Display Summary Tab </h2>
        <span> View project </span>
      </a>
      <a href="/compass/" class="compass">
        <h6> Q4 2013 - Q2 2014 </h6>
        <h2> Goals in AdWords </h2>
        <span> View project </span>
      </a>
      
      <a href="/demo/" class="demo">
        <h6> Q4 2013 - Q2 2014 </h6>
        <h2> Multi-dimensional reports </h2>
        <span> View project </span>
      </a>
      <a href="/ad-templates/" class="ads">
        <h6> Q3 2013 - Present </h6>
        <h2> AdWords Templates </h2>
        <span> View project </span>
      </a>
      <a href="/illos/" class="illos">
        <h6> Ongoing </h6>
        <h2> Miscellaneous illustrations </h2>
        <span> View project </span>
      </a>
      <a href="/loon/" class="loon">
        <h6> Q4 2013 </h6>
        <h2> Google [x]: Project Loon installation guide </h2>
        <span> View project </span>
      </a>
    </section>
    <section id="resume">
      <article id="experience">
        <h6> Google Experience </h6>
        <ul class="cf">
        <li class="experience cf">
          <section class="left">
         
            <h3 class="location">AdWords Display</h3>
            <h3 class="time period"> Q4 2013 - Present </h3>
            <a href="/dtt/"> View details </a>
          </section>

          <section class="right">
            <h3 class="title">Display network summary</h3>
              <p class="description">As the UX lead on Display network summary (go/pendar-dtt), I designed a new consolidated reporting page that visualizes advertiser’s Display Network campaign performance and unearths important insights that used to be buried in tables across seven different pages.  </p>
              
          </section>
        </li>
        <li class="experience cf">
          <section class="left">
           
            <h3 class="location">AdWords Display</h3>
            <h3 class="time period"> Q4 2013 - Q2 2014 </h3>
            <a href="/compass/"> View details </a>
          </section>

          <section class="right">
              <h3 class="title">Goals in AdWords</h3>  
              <p class="description">I designed a new goal-based UI framework for campaign creation in AdWords that is based on advertisers’ individual objective. The new framework simplifies campaign creation in a way that impacts all of AdWords. </p>
          </section>
        </li>

        <li class="experience cf">
          <section class="left">
            
            <h3 class="location">AdWords Display</h3>
            <h3 class="time period"> Q1 2013 - Q2 2014 </h3>
            <a href="/demo/"> View details </a>
          </section>

          <section class="right">
              <h3 class="title">Demographics revamp</h3> 
              <p class="description">I created and designed a new reporting ‘mode’ that for the first time allows AdWords advertisers to view data across multiple demographics dimensions, giving them powerful new insights into who they reach and what demographic segments perform best.  </p>
              
          </section>
        </li>

        <li class="experience cf">
          <section class="left">
            
            <h3 class="location">Google [x]</h3>
            <h3 class="time period"> Q4 2013 - Q2 2014 </h3>
            <a href="/loon/"> View details </a>
          </section>

          <section class="right">
            <h3 class="title">Project Loon installation guide</h3>
              <p class="description">In this 20% project, I worked with the Loon team at Google [x] for over nine months to lead the redesign of a DIY installation guide for Loon, creating an illustrated guide that reduced user errors by 77%, allowing them to install Loon’s antenna on their homes without assistance from outside technicians.  </p>
              
          </section>
        </li>

        <li class="experience cf">
          <section class="left">
           
            <h3 class="location">AdWords Display</h3>
            <h3 class="time period"> Q4 2013 - Present </h3>
            <a href="/ad-templates/"> View details </a>
          </section>

          <section class="right">
              <h3 class="title">AdWords display templates</h3>  
              <p class="description"> I have sought out and taken ownership of the designs for auto-generated AdWords ad templates, bringing in over $8M in additional revenue by creating designs for mobile ad sizes – which were previously missing. I also updated our aging template library by designing much-needed new html5 templates (migrating from Flash), and took charge of all design efforts related to Responsive Ads.  </p>
              
          </section>
        </li>

        <li class="experience cf">
          <section class="left"> 
           
            <h3 class="location">AdWords Display</h3>
            <h3 class="time period"> Q3 2013 - Q1 2014</h3>
            <a href="/illos/"> View details </a>
          </section>

          <section class="right">
              <h3 class="title">Miscellaneous Illustrations</h3>  
              <p class="description"> Before our team hired visual and production designers, I helped enforce product consistency by creating illustrations for numerous AdWords projects and important launches. </p>
              
          </section>
        </li>


      </ul>
      </article>
      <aside>
        <h6> Past experience </h6>
        <ul class="cf">
          <li class="experience cf">
              <h3 class="title"> Design Lead</h3>
              <h3 class="location">Litmus</h3>
              <h3 class="time period"> Sep 2012 - Jul 2013</h3>
          </li>
          <li class="experience cf">
              <h3 class="title"> Director, UX</h3>
              <h3 class="location">Fotomoto</h3>
              <h3 class="time period"> Dec 2010 - Sep 2012</h3>
           
          </li>
          <li class="experience cf">
              <h3 class="title"> UX Lead</h3>
              <h3 class="location">Kibboko</h3>
              <h3 class="time period"> Dec 2008 - Apr 2012</h3>
          </li>
        </ul>

        <h6 style="margin-top:80px" id="education"> Education </h6>
        <ul class="cf">
          <li class="experience cf">
              <h3 class="title"> M.A.Sc. Electrical Engineering</h3>
              <h3 class="location">University of Toronto</h3>
              <h3 class="time period"> 2006</h3>
          </li>
          <li class="experience cf">
              <h3 class="title"> B.A.Sc., Electrical Engineering</h3>
              <h3 class="location">University of British Columbia</h3>
              <h3 class="time period"> 2003</h3>
           
          </li>
        </ul>

      </aside>
      
    </section>
   
  </body>
  <script>
  $(document).ready(function(){
    var months = monthDiff(
        new Date(2013, 07, 29), // November 4th, 2008
        new Date()  // March 12th, 2010
    );
    console.log( months);
  });

  function monthDiff(d1, d2) {
    var months;
    months = (d2.getFullYear() - d1.getFullYear()) * 12;
    months -= d1.getMonth() + 1;
    months += d2.getMonth();
    return months <= 0 ? 0 : months;
}
  </script>
</html>
